<template>
  <div>
    <el-container class="home-container">
      <el-header>
        <el-menu :default-active="$route.path.slice(1)" unique-opened class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="skyblue" text-color="#fff" active-text-color="#ffd04b" router>
          <el-menu-item index="main">首页</el-menu-item>
          <el-menu-item index="more">更多</el-menu-item>
          <el-menu-item index="discount">公告</el-menu-item>
          <el-menu-item @click="goBackState">后台管理</el-menu-item>
          <el-menu-item index="shopCard">购物车</el-menu-item>
          <el-menu-item index="login-register">登录/注册</el-menu-item>
          <el-menu-item index="person">个人中心</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'FirstProjectHome',

  data() {
    return {}
  },
  created() {
    console.log('$route.path', this.$route.path.slice(1))
  },

  mounted() {},

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    async goBackState() {
      const confirmResult = await this.$confirm('是否跳转后台管理页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消跳转后台管理')
      }
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  height: 100vh;
}
.el-header {
  background-color: skyblue;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  width: 100%;
}
.el-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep .el-menu-item {
    margin-left: 80px;
    color: #000 !important;
    font-weight: 500;
    font-size: 18px;
  }
}
::v-deep .is-active {
  background: #fff !important;
  color: #fff !important;
}
</style>
